<template>
    <div class="l-h5-item c-h5-sun">
        <p class="c-h5-sun__title">太阳和月亮</p>
        <div class="c-h5-sun__main">
            <div class="c-h5-sun__item c-h5-sun__sun"> <svg id="sun-rise" viewBox="0 0 150 70">
                    <defs>
                        <linearGradient id="sun-fill" x1="0" y1="0" x2="100%" y2="0">
                            <stop offset="1" stop-color="rgba(172,148,66,.2)">
                                <animate dur="0.8" begin="0s" attributeName="offset" fill="freeze" from="0" to="1"
                                    repeatCount="indefinite" calcMode="spline" keyTimes="0;1" keySplines=".5 0.15 .5 .85">
                                </animate>
                            </stop>
                            <stop offset="1" stop-color="transparent">
                                <animate dur="0.8" begin="0s" attributeName="offset" fill="freeze" from="0" to="1"
                                    repeatCount="indefinite" calcMode="spline" keyTimes="0;1" keySplines=".5 0.15 .5 .85">
                                </animate>
                            </stop>
                        </linearGradient>
                        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="sun-gradient">
                            <stop stop-color="#FBE18E" offset="0%"></stop>
                            <stop stop-color="#F5BF55" offset="100%"></stop>
                        </linearGradient>
                    </defs>
                    <path d="M20,60 a1,1 0 1,1 100,0" fill="none" stroke="rgba(0,0,0,.2)" stroke-width="1"
                        style="stroke: rgba(255, 255, 255, 0.22);"></path>
                    <line x1="15" y1="60" x2="125" y2="60" stroke="rgba(0,0,0,.2)" stroke-width="1"
                        style="stroke: rgba(255, 255, 255, 0.22);"></line>
                    <path id="sun-path" d="M20,60 a1,1 0 1,1 100,0" fill="url(#sun-fill)"></path>
                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <animateMotion dur=".8" repeatCount="indefinite">
                            <mpath xlink:href="#sun-path"></mpath>
                        </animateMotion>
                        <g transform="translate(-12.000000, -15.000000)" fill="url(#sun-gradient)" fill-rule="nonzero"
                            stroke="#1B1C1C" stroke-width="0.4">
                            <g>
                                <path
                                    d="M12.0000535,3 C13.6325867,3 15.1386358,3.4051332 16.5172408,4.2048393 C17.8972858,5.01510574 18.9893214,6.10498127 19.7923876,7.48502626 C20.5968938,8.8602711 20.999627,10.3651202 20.999627,12.0002935 C20.999627,13.6354668 20.5978539,15.1403159 19.7923876,16.5203609 C18.9874014,17.8956057 17.8948857,18.9854813 16.5172408,19.7955077 C15.1403159,20.600494 13.6347468,21.000587 12.0000535,21.000587 C10.3656002,21.000587 8.86051109,20.600494 7.48238615,19.7957477 C6.10474121,18.9854813 5.01318562,17.8953657 4.20723936,16.5203609 C3.40225311,15.1403159 3,13.6354668 3,12.0002935 C3,10.3651202 3.40369315,8.8602711 4.20723936,7.48502626 C5.01078556,6.10498127 6.10234116,5.0151057 7.48238615,4.20507929 C8.86171115,3.40489322 10.3675202,3 12.0000535,3 Z"
                                    id="路径"></path>
                            </g>
                        </g>
                    </g>
                </svg>
                <div class="c-h5-sun__bottom">
                    <div class="c-h5-sun-bottom__item">
                        <p>日出</p>
                        <p>{{ sun.rise }}</p>
                    </div>
                    <div class="c-h5-sun-bottom__item">
                        <p>日落</p>
                        <p>{{ sun.set }}</p>
                    </div>
                </div>
            </div>
            <div class="c-h5-sun__item c-h5-sun__moon"> <svg id="moon-rise" viewBox="0 0 150 70">
                    <defs>
                        <linearGradient id="moon-fill" x1="0" y1="0" x2="100%" y2="0">
                            <stop offset="1" stop-color="rgba(68,111,242,.2)">
                                <animate dur="0.8" begin="0s" attributeName="offset" fill="freeze" from="0" to="1"
                                    repeatCount="indefinite" calcMode="spline" keyTimes="0;1" keySplines=".5 0.15 .5 .85">
                                </animate>
                            </stop>
                            <stop offset="1" stop-color="transparent">
                                <animate dur="0.8" begin="0s" attributeName="offset" fill="freeze" from="0" to="1"
                                    repeatCount="indefinite" calcMode="spline" keyTimes="0;1" keySplines=".5 0.15 .5 .85">
                                </animate>
                            </stop>
                        </linearGradient>
                        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="moon-gradient">
                            <stop stop-color="#79A8FA" offset="0%"></stop>
                            <stop stop-color="#446FF2" offset="100%"></stop>
                        </linearGradient>
                    </defs>
                    <path d="M20,60 a1,1 0 1,1 100,0" fill="none" stroke="rgba(0,0,0,.2)" stroke-width="1"
                        style="stroke: rgba(255, 255, 255, 0.22);"></path>
                    <line x1="15" y1="60" x2="125" y2="60" stroke="rgba(0,0,0,.2)" stroke-width="1"
                        style="stroke: rgba(255, 255, 255, 0.22);"></line>
                    <path id="moon-path" d="M20,60 a1,1 0 1,1 100,0" fill="url(#moon-fill)"></path>
                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <animateMotion dur=".8s" repeatCount="indefinite">
                            <mpath xlink:href="#moon-path"></mpath>
                        </animateMotion>
                        <g transform="translate(-12.000000, -15.000000)" fill="url(#moon-gradient)" stroke="#1B1C1C"
                            stroke-width="0.4">
                            <g>
                                <path
                                    d="M12.4268871,4.37625299 C13.5413095,5.44166853 14.1821984,6.90184126 14.1821984,8.47313485 C14.1821984,11.6279482 11.625553,14.1845936 8.4707396,14.1845936 C6.94249509,14.1845936 5.51416618,13.5757477 4.45873023,12.5153411 C4.41525375,12.5054195 4.37005188,12.4727516 4.32727918,12.4080063 C4.20777268,12.2660923 4.02919114,12.1821688 3.83594051,12.1821688 C3.49570203,12.1821688 3.21816328,12.4497161 3.1992313,12.7646624 C3.59759879,17.2952087 7.40207627,20.8002662 11.9797735,20.8002662 C16.8514262,20.8002662 20.797871,16.8538215 20.797871,11.9821688 C20.797871,7.40549822 17.2962112,3.60239917 12.7973159,3.19959382 C12.4467993,3.22196722 12.1773783,3.50136674 12.1773783,3.84552149 C12.1773783,4.03074979 12.25333,4.2004393 12.3918576,4.32925908 C12.4062833,4.34779712 12.417958,4.36279986 12.4268871,4.37625299 Z M12.1712712,4.29003794 C12.177489,4.28666845 12.179918,4.28651845 12.183997,4.28626654 C12.1817721,4.2858571 12.1804824,4.28561976 12.1746188,4.28900422 Z">
                                </path>
                            </g>
                        </g>
                    </g>
                </svg>
                <div class="c-h5-sun__bottom">
                    <div class="c-h5-sun-bottom__item">
                        <p>月出</p>
                        <p>{{ moon.rise }}</p>
                    </div>
                    <div class="c-h5-sun-bottom__item">
                        <p>月落</p>
                        <p>{{ moon.set }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        sun: {
            type: Object,
            default: () => ({ 'rise': "", 'set': "" })
        },
        moon: {
            type: Object,
            default: () => ({ 'rise': "", 'set': "" })
        }
    },
    mounted(){
        this.initSvgPase()
    },
    watch: {
        moon(new_val, old_val) {
            {
                if (JSON.stringify(new_val) !== JSON.stringify(old_val)) {
                    this.initSvgPase()
                }
            }
        }
    },
    methods: {
        initSvgPase() {
            let e = document.getElementById("moon-rise");
            let i = document.getElementById("sun-rise");
            this.updateSVG(i, this.getRiseTime(this.sun));
            this.updateSVG(e, this.getRiseTime(this.moon))
        },
        updateSVG(t, e) {
            t.setCurrentTime(e);
            t.pauseAnimations();
        },
        getRiseTime(t) {
            let e = parseInt(t.rise.split(":")[0])
                , i = parseInt(t.rise.split(":")[1])
                , n = parseInt(t.set.split(":")[0])
                , a = parseInt(t.set.split(":")[1])
                , _ = 60 * n * 60 + 60 * a - (60 * e * 60 + 60 * i)
                , l = (new Date).getHours()
                , r = (new Date).getMinutes()
                , s = 60 * l * 60 + 60 * r - (60 * e * 60 + 60 * i)
                , o = e + 24 - n
                , c = e + 24 - l;
            return n > e ? l < e || l === e && r < i ? 0 : l > n ? c / o > .5 ? .799999 : 0 : l === n && r >= a ? .799999 : s / _ * .8 : (_ = 60 * n * 60 + 60 * a + (60 * (23 - e) * 60 + 60 * (60 - i)),
                s = 60 * l * 60 + 60 * r + (60 * (23 - e) * 60 + 60 * (60 - i)),
                o = e - n,
                c = e - l,
                l > n && l < e ? c / o > .5 ? .799999 : 0 : l === n && r >= a ? .799999 : l === e && r <= i ? 0 : s / _ * .8)
        },
    },

}
</script>
<style scoped>
.l-h5-item.c-h5-sun {
    color: white;
}

p.c-h5-sun__title {
    margin: 0;
    padding: 10px;
    font-size: 18px;
    border-bottom: 1px solid;
}

.c-h5-sun__main {
    display: flex;
    padding-top: 20px;
}

.c-h5-sun__item {
    width: 50%;
}

.c-h5-sun__bottom {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    padding: 0 15px;
}

.c-h5-sun__bottom p {
    margin: 0;
    text-align: center;
}
</style>